<template>
	<view>
		<view style="background-color: #232323;">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" @change="swiperChange"  current='0'>
				<swiper-item class="swiper-item" v-for="(item,index) in bg" :key="index">
					<view style="background-repeat: no-repeat;background-size: cover;"
						:style="{backgroundImage:`url(${item.url})`}"
						:class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill">
						<view class="swiper_con">
							<view>{{item.name}}</view>
							<view>{{item.content}}</view>
						</view>
						<view class="swiper_con2">
							<image src="../../../static/Mine/lock.png"></image>
							<text>该会员等级尚未解锁</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="vip_middle">
			<view class="vip_con_title">
				<image src="../../../static/Mine/huang.png"></image>
				<text style="margin-left: 20rpx; font-weight: bold;font-size: 32rpx;">会员升级要求</text>
			</view>
			<view class="text" style="font-weight: bold;">1<text class="text2">/2</text></view>
		</view>
		<view class="vip_con">
			<view class="vip_con_info">
				<view>满足积分100分</view>
				<view class="text2 fon">未满足条件</view>
			</view>
			<view class="progress-wrap">
				<progress :percent="progressWidth" show-info stroke-width="8" activeColor="#FFAA29"
					border-radius="10" />
			</view>
			<view class="vip_con_info2">
				<view class="fon">还需要82经验</view>
				<view class="text fon">18<text class="text2 ">/100</text></view>
			</view>
		</view>
		<view class="vip_con">
			<view class="vip_con_info">
				<view>满足积分100分</view>
				<view class="text2 fon">未满足条件</view>
			</view>
			<view class="progress-wrap">
				<progress :percent="progressWidth" show-info stroke-width="8" activeColor="#FFAA29"
					border-radius="10" />
			</view>
			<view class="vip_con_info2">
				<view class="fon">还需要82经验</view>
				<view class="text fon">18<text class="text2 ">/100</text></view>
			</view>
		</view>
		<view class="vip_con">
			<view class="vip_con_info">
				<view>满足积分100分</view>
				<view class="text2 fon">未满足条件</view>
			</view>
			<view class="progress-wrap">
				<progress :percent="progressWidth" show-info stroke-width="8" activeColor="#FFAA29"
					border-radius="10" />
			</view>
			<view class="vip_con_info2">
				<view class="fon">还需要82经验</view>
				<view class="text fon">18<text class="text2 ">/100</text></view>
			</view>
		</view>
		<!-- 分隔线 -->
		<view class="line"></view>
		<view class="conent3">
			<span class="conent3_item"></span>
			<span>为你推荐</span>
			<span class="conent3_item"></span>
		</view>
		<view class="conent4" v-for="(de,vi) in conent3" :key="vi">
			<view v-for="(de,vi) in conent3" :key="vi" class="conent4_item">
				<image :src="de.cover_plan"></image>
				<view>
					<view>{{de.name}}</view>
					<view class="conent4_price">{{de.price}}</view>
				</view>
			</view>
		</view>
		<view class="empty" :style='{height:height+"rpx"}' v-if="conent3.length==0">
			<Empty mode="list"></Empty>
		</view>
	</view>
</template>
<script>
	import Empty from "../../../components/bw-Empty/bw-Empty"
	import List from "../../../components/bw-lists/bw-lists"
	export default {
		components: {
			Empty,
			List
		},
		data() {
			return {
				conent3: [],
				height: 0,
				bg: [{
						name: "普通会员",
						url: "../../../static/Mine/mem1.jpg",
						content: '可享受商品折扣:9折'
					},
					{
						name: "青铜会员",
						url: "../../../static/Mine/mem2.jpg",
						content: '可享受商品折扣:8折'
					},
					{
						name: "黄铜会员",
						url: "../../../static/Mine/mem3.jpg",
						content: '可享受商品折扣:7折'
					},
					{
						name: "白银会员",
						url: "../../../static/Mine/mem4.jpg",
						content: '可享受商品折扣:6折'
					},
					{
						name: "黄金会员",
						url: "../../../static/Mine/mem5.jpg",
						content: '可享受商品折扣:5折'
					},
				],
				indicatorDots: false, //是否显示切换的小点
				autoplay: false, //是否自动播放
				interval: 2000,
				duration: 500,
				currentIndex: 0, //轮播图下标
				progressWidth: 50,
			}
		},
		methods: {
			swiperChange(e) {
				console.log(e)
				this.currentIndex = e.detail.current;
			},
		}

	}
</script>
<style lang="scss" scoped>
	/deep/ .uni-progress-inner-bar {
		border-radius: 10rpx;
	}

	.uni-swiper-wrapper {
		/deep/ .uni-swiper-slide-frame {
			width: 95%;
			height: 95%;
			margin-right: 10rpx;
		}

	}

	.text {
		color: #FFAA29;
	}

	.text2 {
		color: #999999;
	}

	.fon {
		font-size: 24rpx;
	}

	.swiper {
		height: 400rpx;
		width: 107%;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		overflow: unset;
		color: #FFF;
	}

	.slide-image {
		height: 280rpx;
		width: 630rpx;
		border-radius: 20rpx;
		margin: 0rpx 95rpx;
	}

	.active {
		transform: scale(1.14);
		transition: all 0.2s ease-in 0s;
		z-index: 20;
	}

	.swiper_con {
		display: flex;
		flex-direction: column;
		padding: 40rpx;
	}

	.vip_con_title {
		display: flex;
		align-items: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.swiper_con2 {
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		image {

			margin-right: 20rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}

	.vip_middle {
		padding: 30rpx 30rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.vip_con {
		background-color: #F9F9F9;
		margin: 30rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.progress-wrap {
		padding: 20rpx;
	}

	.vip_con_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.vip_con_info2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
	}

	.line {
		width: 100%;
		height: 18rpx;
		background-color: #F5F5F5;
	}

	.empty {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.conent3 {
		height: 100rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.conent3_item {
		background-color: #333;
		background-size: 2rpx;
		height: 2rpx;
		align-items: center;
		width: 30%;
	}

	.conent4 {
		width: 43%;
		padding: 20rpx;
	}

	.conent4_price {
		color: #FF9016;
	}

	.conent4_item {
		display: flex;
		// justify-content: space-between;
		flex-direction: column;
		flex-wrap: nowrap;
	}
</style>
